/*css注释*/
//本节课主讲：1.把less变量当成css属性值用 如:width: @len;
//           2.less变量做为属性名的时候   @{变量名} 如: @{bg}: @basecolor;
//           3.less做为选择器  @{变量}    .active class=active
//           4.//less做为选择器  @{变量}   #active id=active #@{activeclass} { width: 100px;height: 100px;}
//           5.less变量的作用域 使用变量是先在本作用域里找，如果找到就用 如果没找到 就到上一级作用域里找
//           6.哪些东西需要变量  网站配色的颜色;常见的字体大小;媒体查询的值
// less的注释
//定义变量
@len:1000px;
@basecolor:gray;
@activeclass:active;
@bg:background-color;
//变量使用
#box{
//把less变量当成css属性值用
  width: @len;
  height: @len/2;
  border: 1px solid @basecolor;
  background: red;
//less变量做为属性名的时候   @{变量名}
  @{bg}: @basecolor;
}
//less做为选择器 .active class=active @{变量}
  //.@{activeclass} {
  //  width: 100px;
  //  height: 100px;
  //}
//less做为选择器  #active id=active
#@{activeclass} {
  width: 100px;
  height: 100px;
}
/*........................*/
//作用域
@var:100px;
#box{
  @var:50px;
  .inner{
    @var:15px;
    width: @var;/*20px  less会把所有的变量先提取出来 然后在进行编译 所有在{}代码块里找最后的变量是多少 所以这个是20px*/
    background-color: #ccc;
    @var:20px;
  }
  width: @var;/*50px*/
}
.list{
  height: @var;/*100px*/
}